---
id: guides-building-a-custom-connector
slug: /search-ui/guides/building-a-custom-connector
title: Building a custom connector
date: 2022-02-27
tags: ["custom connector"]
---

This guide helps you build a custom connector so you can use Search UI with your own API.

A connector is a class that implements the following methods:

- `onSearch`
- `onAutocomplete`
- `onResultClick`
- `onAutocompleteResultClick`

### Connector Example

Below is an example of a custom connector. Example is given in typescript as the types may be helpful to you.

See <DocLink id="api-core-state" section="request-state" text="Request State"/>, <DocLink id="api-core-state" section="response-state" text="Response State"/> and <DocLink id="api-core-configuration" section="search-query-queryconfig" text="Search Query Config"/> for more information.

````typescript

```ts
import type { APIConnector } from "@elastic/search-ui";

class MyAPIConnector implements APIConnector {
  async onSearch(
    state: RequestState,
    queryConfig: QueryConfig
  ): Promise<ResponseState> {
    const { searchTerm, current, filters, sort } = state;
    // perform a request to your API with the request state
    const response = await fetch("https://api.my-host/search", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        searchTerm,
        current,
        filters,
        sort
      })
    });
    // response will need to be in the shape of ResponseState.
    // Alternatively you could transform the response here
    return response.json();
  }

  async onAutocomplete(
    state: RequestState,
    queryConfig: AutocompleteQueryConfig
  ): Promise<AutocompleteResponseState> {
    const response = await fetch(
      "https://api.my-host/autocomplete?query" + state.searchTerm,
      {
        headers: {
          "Content-Type": "application/json"
        }
      }
    );
    // response will need to be in the shape of AutocompleteResponseState.
    // Alternatively you could transform the response here
    return response.json();
  }

  onResultClick(params): void {
    console.log(
      "perform a call to the API to highlight a result has been clicked"
    );
  }

  onAutocompleteResultClick(params): void {
    console.log(
      "perform a call to the API to highlight an autocomplete result has been clicked"
    );
  }
}
````

### Integration

Once you have built your connector, you can simply use it within Search UI.

```js

  const connector = new MyAPIConnector();

  const config = {
    apiConnector: connector,
    searchQuery: { ... },
    autocompleteQuery: { ... }
  };

  const App = () => (
    <SearchProvider config={config}>
      <div className="App">
        <SearchBox />
      </div>
    </SearchProvider>
  );

```
